{include file='../application/index/view/default/header.html' title='新闻详情' userData=$userData }
<style>
.post .TakeUp {
    position: fixed;
    top: 50%;
    right: 10px;
    z-index: 9999999;
    border-radius: 100%;
    width: 60px;
    height: 60px;
    padding: 0;
    line-height: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
}
    .clearfix:after{
        content:"";
        height:0;
        line-height:0;
        display:block;
        visibility:hidden;
        clear:both;
    }
    .clearfix{
        zoom:1;
    }

    .container .row{
        margin: 0;
    }
    .panel{
        width: 100%;
        padding: 0;
    }
    .panel .input-group{
        padding: 1%;
    }
    .panel .input-group span{
        margin-bottom: 10px;
        display: inline-block;  
    }
    .panel .input-group textarea{
        width: 100%;
        margin: 0px 0px 20px;
        resize: none;
        height: 100px;
    }
    .comment-submit{
        height: 45px;
        line-height: 45px;
    }
    .nr{
        padding: 1%;
        margin-top: 30px;
    }
    .nr .panel-primary{
        width: 100%;
        margin: 0;
        margin-bottom: 20px;
        border: 1px solid #2ebaae;
        border-radius: 4px;
    }
    .nr .panel-primary .panel-heading{
        width: 100%;
        height: 38px;
        line-height: 38px;
        padding: 0 1em;
        background: #2ebaae;
        color: #fff;
    }
    .nr .panel-primary .panel-heading h3{
        height: 38px;
        line-height: 38px;
        color: #fff;
        margin: 0;
    }
    .nr .panel-primary .panel-body{
        width: 100%;
        padding: 15px;
        background-color: white;
        line-height: 18px;
    }
    .pagination{
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .pagination li{
        list-style: none;
        padding: 0;
        margin: 0;
        float: left;
    }
    .pagination li a{
        list-style: none;
        padding: 6px 12px;
        border: 1px solid #2ebaae;
        margin-left: -1px;
    }
    .pagination li:nth-last-child(1) a{
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    .pagination li:first-child a{
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        margin-right: -1px;
    }
    .active a{
        background: #2ebaae;
        color: #fff;
    }
    .active a:hover{
        color: #fff !important;
    }

</style>
<div id="main">

			<!-- Post -->

				<article class="post"  id="news" data-nid="{$newsData['nid']}" >
					<header>
						<div class="title">
							<h2>
								<a href="/index/index/detail?nid=">1111</a>
							</h2>
							<p>勇敢的人不是不害怕，而是怕也要向前走。</p>
						</div>
						<div class="meta">
							<time class="published" datetime="2018-11-01">2018-11-01</time>
							<a href="#" class="author">
								<span class="name">团团呗</span>
								<img src="/static/images/avatar.jpg" alt="" />
							</a>
						</div>
					</header>
					<a href="/index/index/detail?nid=" class="image featured">
						<img src="/static/images/pic01.jpg" alt="" />
					</a>

					<div class="content1">

						<p>{$newsData['detail']}</p>
						
					</div>

					<footer>
						<ul class="actions">
							<li>
								
								<a href="#top" class="button big TakeUp">返回<br/>顶部</a>
							</li>
						</ul>
					</footer>
				</article>









<div class="container post">
    
    <div class="row">
       
        <div class="panel clearfix">
            <div class="input-group clearfix">
                <?php if($userData){ ?>
                <span><span class="text-primary">{$userData['username']}：</span></span>
                <textarea class="ctextarea  content" placeholder="请输入评论内容" ></textarea>
                <div style="display: flex;" >
                    <button style="margin: 0 auto;" class="comment-submit pull-right ">提交</button>
                </div>
                <input type="hidden" id="nid" value="{$newsData['nid']}">
                <input type="hidden" id="username" value="{$userData['username']}">

                <?php }else{ ?>
                <span><span class="text-primary">评论区：</span></span>
                <textarea class="ctextarea pull-left" disabled>请登录</textarea>
                <?php } ?>
            </div>
            <div class="nr">
                <div class="comment"></div>
                <nav class="row">
                    <ul class="pagination"></ul>
                </nav>
            </div>

        </div>
    </div>
</div>
</div>
</div>
</body>
<script>
    $(document).ready(function () {
        $('.comment-submit').on('click', function () {
            $.ajax({
                type: 'POST',
                url: '/index/comment/add',
                dataType: 'json',
                data: { 'content': $('.content').val(), 'username': $('#username').val(), 'nid': $('#nid').val() },
                success: function (data) {
                    alert(data.msg);
                    if (!data.type) {
                        window.location.reload();
                    }
                }
            });
        });
        var page = 1;
        var nid = $('#news').data('nid');
        function getPageComment(page, nid) {
            $.ajax({
                type: "get",
                url: '/index/comment/getPageCommentList?limit=5&page=' + page + '&nid=' + nid,
                success: function (result, textStatus) {
                    var ulBody = $('.comment');
                    chtml = '';
                    var commentList = result.commentList;
                    if (commentList.length == 0) {
                        chtml = '没有评论内容';
                    } else {
                        for (var i in commentList) {
                            chtml += ' <div class=" panel-primary row"><div class="panel-heading"><h3 class="panel-title"> ' + commentList[i].username + '<small class="pull-right">' + commentList[i].ctime + '</small></h3></div><div class="panel-body text-primary">' + commentList[i].content + '</div></div>';
                        }
                    }
                    ulBody.html(chtml);

                    var pageBody = $('.pagination');
                    var pageCount = Math.ceil(result.count / result.limit);
                    phtml = '';
                    var isHiddenExist = '';
                    for (var i = 1; i <= pageCount; i++) {
                        if (i == page) {
                            var style = 'class="active"';
                            phtml += "<li " + style + "><a href='javascript:;' data-nid='" + nid + "' data-page='" + i + "'" + " class='page_btn' >" + i + "</a></li>";
                        } else {
                            var style = '';
                            if (i < 2 || i < (page + 4) && i > (page - 3) || i > (pageCount - 1)) {
                                phtml += "<li " + style + "><a href='javascript:;' data-nid='" + nid + "' data-page='" + i + "'" + " class='page_btn' >" + i + "</a></li>";
                                isHiddenExist = 0;
                            } else {
                                if (isHiddenExist == 0) {
                                    phtml += "<li>...</li>";
                                    isHiddenExist = 1;
                                }
                            }
                        }


                    }
                    pageBody.html(phtml);

                    $('.page_btn').on('click', function () {
                        var page = $(this).data('page');
                        var nid = $(this).data('nid');
                        getPageComment(page, nid);
                    });
                }
            });
        }
        getPageComment(page, nid);

    })
</script>


</html>